<template>
	<view class="tabs bgf">
		<u-tabs :list="tab.list" :is-scroll="false" :current="tab.current" @change="tab.change"
		active-color="#FF1818"
		barWidth="60"
		barHeight="8"
		height="100"
		></u-tabs>
	</view>
	
	
	<view class="container pl30 pr30">
		
		<view class="item t-flex between bgf mt20 r20" v-for="item in data" :key="item.id">
			<view class="left t-flex colum">
				<view class="value" v-if="item.coupon_type==0">
					{{+item.minus_price}}<text class="f26">元</text>
				</view>
				<view class="value" v-else>
					{{item.discount}}<text class="f26">折</text>
				</view>
				<view class="f24">
					{{+item.full_price?`满${+item.full_price}元可用` :'无使用门槛'}}
				</view>
			</view>
			<view class="right pl30">
				<view class="f30 c3 bold">
					{{item.coupon_name}}
				</view>
				<view class="f24 c9 mt10">
					<text v-if="item.tm_type_status==1">
						{{$time(item.begintime,2)}} 至 {{$time(item.endtime,2)}}
					</text>
					<text v-else>
						<text v-if="+item.day">
							有效期至{{item.effective_time_text}}
						</text>
						<text v-else>
							永久有效
						</text>
					</text>
				</view>
			</view>
			<image src="../../static/image/14.png" mode="aspectFit" class="img"
			v-if="item.status==1"
			></image>
			<image src="../../static/image/15.png" mode="aspectFit" class="img"
			v-if="item.status==2"
			></image>
		</view>
		
		<empty msg="暂无相关优惠券" v-if="!data.length"></empty>
		
		<view class="bpad"></view>
		
		
		
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app"
import { usePaging } from '../../lib/ts/util';
	
	
	const {
		data,
		reload,
		getMore
	} = usePaging('/api/order_info/UserCoupon')
	
	onLoad(()=>{
		reload({status:tab.list[tab.current].id})
	})
	onPullDownRefresh(()=>{
		reload({status:tab.list[tab.current].id})
	})
	onReachBottom(()=>{
		getMore({status:tab.list[tab.current].id})
	})
	
	let tab = reactive({
		list:[{name:'未使用',id:0},{name:'已使用',id:1},{name:'已失效',id:2}],
		current:0,
		change(e:number){
			tab.current = e
			reload({status:tab.list[tab.current].id})
		}
	})
	

</script>

<style scoped lang="scss">
	.tabs{
		position: sticky;
		top: 0;
		z-index: 5;
	}
	.item{
		padding: 20rpx 34rpx;
		position: relative;
		.img{
			width: 138rpx;
			height: 110rpx;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}
		.left{
			color: #FF1818;
			width: 22%;
			.value{
				font-size: 52rpx;
				margin-bottom: 4rpx;
			}
		}
		.right{
			border-left: 2rpx dashed #E6E6E6;
			width: 78%;
		}
	}
	
	
	
	
</style>
